TTRN-678: Viteによる書き直し・リファクタ #14

3c1u · 2023-07-25T08:39:03Z

Close TTRN-678.

概要

注意: 問題の修正が必要なので、コードが問題なさそうならまたDraftに戻します。

create-react-app から Vite でのビルドへの見直し
デザインリニューアルに伴う再実装
ロジックをReduxに分離
ディレクトリ構造の整理
- pages/ がルーティングとほぼ一致する形になるよう変更
- Next.js等に移植しても変更が最小限になるようにする
一般的なコーディングスタイルの適用
- formの送信をonSubmitでハンドリング
- inputをすべてcontrolledに
- フォーム要素のlabel/id対応付け
- 一部機能のコンポーネント化

補足事項

よくあるReact + Reduxのコードを想定
- Redux （redux-toolkit）でロジックを書いているので、ユーザのスキルによっては読むのが難しいかもしれない
- ↑実務ならこれくらいの分離度は普通かな...？などと思っている
- redux-toolkit の悪いところ（redux-thunkの無駄なwrapによるエラーハンドリングの難しさ）をもろに受けているので、剥がしてしまうのも一つ
- 行数も増えているので、認知負荷が高くなっている可能性もある
CSSスタイリングにはBEM（っぽいやつ）を採用
- 普段BEMは使わないので、用法としてマズそうならご指摘お願いします
CSSはかなり冗長
- コンポーネント化で済む部分も多いが、コンポーネント分けは最小限にやっている
- 色などは変数化してあるが、ユーザには馴染みがないかもしれない？
TaskCreateForm はやや難しいかもしれない
- UIステートが別れているのと、DOMが絡む処理を含んでいる

コード量比較

BEFORE

      12 src/App.js
       8 src/App.test.js
      23 src/authSlice.js
      24 src/components/Header.jsx
       0 src/const.js
      22 src/index.js
      77 src/pages/EditList.jsx
      93 src/pages/EditTask.jsx
     147 src/pages/Home.jsx
      46 src/pages/NewList.jsx
      76 src/pages/NewTask.jsx
       6 src/pages/NotFound.jsx
      52 src/pages/SignIn.jsx
      60 src/pages/SignUp.jsx
      13 src/reportWebVitals.js
      36 src/routes/Router.jsx
       5 src/setupTests.js
       7 src/store.js
     707 total

AFTER

      20 src/App.jsx
      15 src/components/BackButton.jsx
      84 src/components/Sidebar.jsx
     167 src/components/TaskCreateForm.jsx
      59 src/components/TaskItem.jsx
      27 src/hooks/useLogin.js
      18 src/hooks/useLogout.js
      27 src/hooks/useSignup.js
      11 src/icons/CheckIcon.jsx
      11 src/icons/ChevronIcon.jsx
      13 src/icons/ListIcon.jsx
      11 src/icons/PencilIcon.jsx
      13 src/icons/PlusIcon.jsx
      26 src/index.jsx
       7 src/pages/404.jsx
      25 src/pages/index.page.jsx
      72 src/pages/list/new/index.page.jsx
     115 src/pages/lists/[listId]/edit/index.page.jsx
      64 src/pages/lists/[listId]/index.page.jsx
     146 src/pages/lists/[listId]/tasks/[taskId]/index.page.jsx
      84 src/pages/signin/index.page.jsx
      96 src/pages/signup/index.page.jsx
      44 src/routes/Router.jsx
     109 src/store/auth/index.js
      12 src/store/index.js
     133 src/store/list/index.js
     159 src/store/task/index.js
      17 src/utils/handleThunkError.js
      30 src/vendor/axios.js
      15 vite.config.js
    1630 total

sugitlab

ask: Station1ではライブラリのバージョンアップを実施する内容になっており、その対象は React と React-router としてある。問題文を変更する想定か、package.jsonをあとで変更する想定か確認したいです。

sugitlab · 2023-08-07T02:23:44Z

memo:

CSSスタイリングにはBEM（っぽいやつ）を採用
色などは変数化してあるが、ユーザには馴染みがないかもしれない？

ここまでのRailwayでBEMもSaSSも扱ってるので大丈夫だと思います!! 💯

src/vendor/axios.js

sugitlab · 2023-08-07T02:57:32Z

package.json

+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.0",


ask: station2で eslint, prettier の導入があるのであとではずす想定かなと理解してます。

他が問題なさそうならインデントをわざと崩した後に除去する予定です

3c1u · 2023-08-08T05:05:39Z

その対象は React と React-router としてある

明確に指定してあるなら落とした方が良さそうですね...（もしかするとReact 18のcreateRoot対応とreact-router v5→v6のAPI変更を意図していたりする...？）落としておきます

3c1u added 30 commits July 25, 2023 13:14

refactor: use vite

81e664f

remove: .eslintrc.cjs

9d8e644

update: config

ed07c2f

update: index.css

374380b

update: rewrite Header

68a10e2

refactor: rewrite login/logut

79af048

refactor: rewrite auth

6682ff9

refactor: use createRoot()

a1d442b

remove: const.js

cb100e7

rename: Header.module.css

ebc5aff

refactor: use reset css

5d3f83f

update: style

52f16ad

add: sidebar mock

5cd06c8

add: Inter font

d8efc41

fix: specify fallback

ff6dd0f

fix: smaller height screen

191c2f6

update: add sidebar states

6204207

fix: login and logout

05b49ec

fix: layout

6c73373

refactor: rewrite login/signup

3803f84

fix: navigation

a84a717

remove: header

19597a7

fix: top navigation

2755842

fix: allow custom accent color

23e9521

add: list store

47f665b

add: todo slice

25aa8c5

fix: remove unused variables

e365007

update: create list using redux

7a799ff

fix: post login/logout

9793eec

fix: reroute

3aea109

3c1u added 17 commits July 29, 2023 16:18

fix: remove loading guard

f9bd6e1

update: edit list

ecf5dde

remove: old task creation

64c74c6

remove: index.css

2ff09b2

add: TaskCreateForm

15fb844

fix: add focus ring

34a171a

remove: trash

5f26127

update: task complete

5d9bbf1

fix: properly add id from response

afa1d42

add: task edit

49c0482

fix: infinite load

46bc0a5

refactor: todo -> task

a8f0933

refactor: description -> detail

be67ebc

fix: rename glitch

4d223b6

refactor: use controlled form

156379e

fix: check token before fetch

47f043e

fix: use normal css

87462a9

3c1u marked this pull request as ready for review August 1, 2023 02:39

3c1u requested review from SuguruOoki and sugitlab August 1, 2023 02:51

3c1u self-assigned this Aug 1, 2023

sugitlab reviewed Aug 7, 2023

View reviewed changes

src/vendor/axios.js Outdated Show resolved Hide resolved

sugitlab reviewed Aug 7, 2023

View reviewed changes

fix: typo

87cfcec

3c1u added 2 commits August 8, 2023 14:19

fix: downgrade react

2e62f43

fix: downgrade react-router

c82f18b

3c1u requested a review from sugitlab August 8, 2023 06:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TTRN-678: Viteによる書き直し・リファクタ #14

TTRN-678: Viteによる書き直し・リファクタ #14

3c1u commented Jul 25, 2023 •

edited

Loading

sugitlab left a comment •

edited

Loading

sugitlab commented Aug 7, 2023 •

edited

Loading

sugitlab Aug 7, 2023 •

edited

Loading

3c1u Aug 8, 2023

3c1u commented Aug 8, 2023

TTRN-678: Viteによる書き直し・リファクタ #14

Are you sure you want to change the base?

TTRN-678: Viteによる書き直し・リファクタ #14

Conversation

3c1u commented Jul 25, 2023 • edited Loading

概要

補足事項

コード量比較

sugitlab left a comment • edited Loading

Choose a reason for hiding this comment

sugitlab commented Aug 7, 2023 • edited Loading

sugitlab Aug 7, 2023 • edited Loading

Choose a reason for hiding this comment

3c1u Aug 8, 2023

Choose a reason for hiding this comment

3c1u commented Aug 8, 2023

3c1u commented Jul 25, 2023 •

edited

Loading

sugitlab left a comment •

edited

Loading

sugitlab commented Aug 7, 2023 •

edited

Loading

sugitlab Aug 7, 2023 •

edited

Loading